<template>
  <div class="left-two" :style="{ height: LHTwo + 'px' }">
    <out-line :height="LHTwo">
      <div>
        <div class="module-title">
          <div class="left">
            <div class="text">机构数据</div>
            <img class="pic" src="@/assets/images/mtitle.png" />
          </div>
          <div class="tab-titles">
            <div
              v-for="(tab, index) in tabs"
              :key="index"
              :class="{'active': activeTab === index}"
              @click="changeTab(index)"
            >
              {{ tab.title }}
            </div>
          </div>
        </div>
        <div class="tab-content">
          <div v-show="activeTab === 0">
            <ul class="list">
              <li>
                <div class="title">
                  <img src="marker.png" alt="标记图">
                  <span>标题1</span>
                </div>
                <div class="quantity">10</div>
              </li>
              <li>
                <div class="title">
                  <img src="marker.png" alt="标记图">
                  <span>标题2</span>
                </div>
                <div class="quantity">20</div>
              </li>
              <li>
                <div class="title">
                  <img src="marker.png" alt="标记图">
                  <span>标题3</span>
                </div>
                <div class="quantity">30</div>
              </li>
            </ul>

            
            
          </div>
          <div v-show="activeTab === 1">
            <h2>柱状图</h2>
            <!-- 柱状图内容 -->
          </div>
          <div v-show="activeTab === 2">
            <h2>饼状图</h2>
            <!-- 饼状图内容 -->
          </div>
        </div>
      </div>
    </out-line>
  </div>
</template>

<script>
export default {
  props: {
    LHTwo: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '数据' },
        { title: '柱状图' },
        { title: '饼状图' }
      ]
    };
  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
    }
  }
};
</script>
<style lang="less" scoped>
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #FFFFFF;
  opacity: 0.1;
}

.list li:nth-child(even) {
  background-color: #FFFFFF;
  opacity: 0.1;
}

.list li:hover {
  background-color: #006AFB;
  opacity: 1;
}

.title {
  display: flex;
  align-items: center;
}

.title img {
  margin-right: 10px;
}

.quantity {
  margin-left: auto;
}


</style>


